//这个js里实现查询数据库，并把数据渲染到页面(php请求数据库的操作已完成)
//调方法（utils封装好的）请求接口PHP，获取PHP返回的数据
//主要是渲染tbody（其他都不变）
function getShopList(){
const tbody = document.querySelector('#tbody')
utils.fetch('./api/v1/shop/select.php').then(res=>{
    console.log(res)
    //得到返回的json数据开始渲染页面 -- 模板字符串
    //定义接口前后端事先说好的
    if(res.code===200){
        //解构赋值 
        const {list}=res.body
        //等同于 const list = res.body.list
        //得到每一条数据，形成一行tr
        var str=''
        list.forEach((shop,index) => {
            index++
            str+=`   <tr class="shop-list" data-id="${shop.Id}">
            <td><i>${index}</i></td>
            <td><span>${shop.name}</span><input id="uinputName" type="text" ></td>
            <td><span>${shop.price}</span><input type="text" ></td>
            <td><span>${shop.number}</span><input type="text" ></td>
            <td><button class="btn btn-info btn-sm btn-edit" id="update-btn">编辑</button>
                <button class="btn btn-danger btn-sm btn-del" id="del-btn">删除</button>
                <button class="btn btn-success btn-sm btn-ok" id="ok-btn">确定</button>
                <button class="btn btn-warning btn-sm btn-cancel" id="cancel-btn">取消</button></td>
        </tr>`
        });
        tbody.innerHTML=str
    }
  
})
}
getShopList()
